<template>
	<div>
		<!-- 日期搜素框 -->
		<div class="demo-date-picker">
			<div class="block">
				<el-date-picker
					v-model="valueTime"
					type="daterange"
					unlink-panels
					range-separator="To"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:shortcuts="shortcuts"
					:size="size"
					@change="getTimes(valueTime)"
				/>

				<!-- 确认按钮 -->
				<vxe-button
					status="primary"
					style="margin-left: 10px"
					content="确认"
					size="small"
					@click="queryData()"
				></vxe-button>
			</div>
		</div>

		<!-- 汇总表单 -->
		<vxe-table  
			border
			resizable
			height="200"
			ref="xTable0"
			:header-cell-style="{backgroundColor: '#bddeff'}"
			:row-config="{ isCurrent: true, isHover: true }"
			:data="tableData_summary"
		>
			<vxe-column field="Team" title="部门"></vxe-column>
			<vxe-column field="TicketNum" title="总工单量"></vxe-column>
			<vxe-column field="RemoveImpactData" title="解除服务影响/上升不达标个数"></vxe-column>
			<vxe-column field="FollowOverData" title="跟进or结单不达标个数"></vxe-column>
			<vxe-column field="RemoveImpactPercentage" title="解除服务影响/上升达标率"></vxe-column>
			<vxe-column field="FollowOverPercentage" title="跟进/结单达标率"></vxe-column>
		</vxe-table>


		<div class="line" />

		<div class="center-text-3">
			<a
				href="https://wiki.haplat.net/pages/viewpage.action?pageId=270769026"
				target="_blank"
				>审计规则</a
			>
		</div>

		<el-collapse v-model="activeNames" accordion>
			<el-collapse-item title="监控绩效面板不达标工单(附件1)" name="0">
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">监控绩效面板不达标工单(备注小于30分钟)</el-text>
				</div>

				<!-- 导出 -->
				<!-- <vxe-toolbar>
					<template #buttons>
						<vxe-button @click="(exportDataEvent('xTable3'))">导出</vxe-button>
					</template>
				</vxe-toolbar> -->

				<!-- 监控绩效面板不达标工单 -->
				<vxe-table
					border
					resizable
					height="800"
					ref="xTable0"
					:row-config="{ isCurrent: true, isHover: true }"
					:data="tableData_performance_panel"
				>
					<!-- <vxe-column type="seq" width="60"></vxe-column> -->
					<vxe-column field="TicketNum" title="工单号"></vxe-column>
					<vxe-column field="AlarmName" title="告警名称"></vxe-column>
					<vxe-column
						field="TicketQueryTime"
						title="工单请求时间"
					></vxe-column>
					<vxe-column
						field="AlarmTime"
						title="告警持续时间(分钟)"
					></vxe-column>
					<vxe-column
						field="ResolveTime"
						title="解除服务影响耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="FirstRemarkTime"
						title="首次备注时间(分钟)"
					></vxe-column>
					<vxe-column
						field="UpT2Time"
						title="上升T2时间(分钟)"
					></vxe-column>
					<vxe-column
						field="CloseTime"
						title="关单耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="NearTimeAlarm"
						title="相邻时间告警量"
					></vxe-column>
					<vxe-column field="Reason" title="不达标原因"></vxe-column>
					<vxe-column field="DealName" title="处理人"></vxe-column>
				</vxe-table>
				<!-- 分页按钮 -->
				<!-- <vxe-pager border size="medium" :loading="loading3" :current-page="tablePage3.currentPage"
					:page-size="tablePage3.pageSize" :total="tablePage3.totalResult"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@page-change="handlePageChange3">
				</vxe-pager> -->

				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">监控绩效面板不达标工单(备注大于30分钟)</el-text>
				</div>

				<!-- 导出 -->
				<!-- <vxe-toolbar>
					<template #buttons>
						<vxe-button @click="(exportDataEvent('xTable3'))">导出</vxe-button>
					</template>
				</vxe-toolbar> -->

				<!-- 监控绩效面板不达标工单 -->
				<vxe-table
					border
					resizable
					height="800"
					ref="xTable0"
					:row-config="{ isCurrent: true, isHover: true }"
					:data="tableData_performance_panel_30"
				>
					<!-- <vxe-column type="seq" width="60"></vxe-column> -->
					<vxe-column field="TicketNum" title="工单号"></vxe-column>
					<vxe-column field="AlarmName" title="告警名称"></vxe-column>
					<vxe-column
						field="TicketQueryTime"
						title="工单请求时间"
					></vxe-column>
					<vxe-column
						field="AlarmTime"
						title="告警持续时间(分钟)"
					></vxe-column>
					<vxe-column
						field="ResolveTime"
						title="解除服务影响耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="FirstRemarkTime"
						title="首次备注时间(分钟)"
					></vxe-column>
					<vxe-column
						field="UpT2Time"
						title="上升T2时间(分钟)"
					></vxe-column>
					<vxe-column
						field="CloseTime"
						title="关单耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="NearTimeAlarm"
						title="相邻时间告警量"
					></vxe-column>
					<vxe-column field="Reason" title="不达标原因"></vxe-column>
					<vxe-column field="DealName" title="处理人"></vxe-column>
				</vxe-table>
			</el-collapse-item>

			<el-collapse-item title="跟进不达标数据" name="10">
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">跟进不达标数据看板</el-text>
				</div>

				<!-- 导出 -->
				<!-- <vxe-toolbar>
					<template #buttons>
						<vxe-button @click="(exportDataEvent('xTable3'))">导出</vxe-button>
					</template>
				</vxe-toolbar> -->

				<!-- 跟进不达标数据看板 -->
				<vxe-table
					border
					resizable
					height="800"
					ref="xTable10"
					:row-config="{ isCurrent: true, isHover: true }"
					:data="tableData_follow_grafana"
				>
					<!-- <vxe-column type="seq" width="60"></vxe-column> -->
					<vxe-column field="TicketNum" title="工单号"></vxe-column>
					<vxe-column field="AlarmName" title="告警名称"></vxe-column>
					<vxe-column
						field="TicketQueryTime"
						title="工单请求时间"
					></vxe-column>
					<vxe-column
						field="AlarmTime"
						title="告警持续时间(分钟)"
					></vxe-column>
					<vxe-column
						field="RemoveTime"
						title="解除服务影响耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="FirstRemarkTime"
						title="首次备注时间(分钟)"
					></vxe-column>
					<vxe-column
						field="UpT2Time"
						title="上升T2耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="CloseTime"
						title="关单耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="NearTimeAlarm"
						title="相邻时间告警量"
					></vxe-column>
					<vxe-column field="Reason" title="不达标原因"></vxe-column>
					<vxe-column field="DealName" title="处理人"></vxe-column>
				</vxe-table>
				<!-- 分页按钮 -->
				<!-- <vxe-pager border size="medium" :loading="loading3" :current-page="tablePage3.currentPage"
					:page-size="tablePage3.pageSize" :total="tablePage3.totalResult"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@page-change="handlePageChange3">
				</vxe-pager> -->
			</el-collapse-item>

			<el-collapse-item title="抽选工单审计看板(附件2)" name="2">
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">抽选工单审计看板</el-text>
				</div>

				<!-- 导出 -->
				<el-row type="flex" justify="center">
					<el-text size="large"
						>数据更新至：<el-text class="red-font"
							>2023-10-22</el-text
						>
					</el-text>
				</el-row>
				<el-row>
					<el-col :span="22">
						<el-text class="red-font"
							>抽检工时效均符合要求，请重点关注解除服务影响、备注信息是否有效</el-text
						>
					</el-col>
					<el-col :span="2">
						<vxe-toolbar>
							<template #buttons>
								<vxe-button @click="exportDataEvent('xTable2')"
									>导出</vxe-button
								>
							</template>
						</vxe-toolbar>
					</el-col>
				</el-row>

				<!-- 原始表格（抽选工单审计表） -->
				<vxe-table
					border
					resizable
					ref="xTable2"
					height="600"
					:row-config="{ isCurrent: true, isHover: true }"
					:export-config="{}"
					:data="tableRandomData"
				>
					<!-- <vxe-column type="seq" width="60"></vxe-column> -->
					<vxe-column field="TicketNum" title="工单号"></vxe-column>
					<vxe-column
						field="Alarm_Name"
						title="告警名称"
					></vxe-column>
					<vxe-column field="Req_Time" title="请求时间"></vxe-column>
					<vxe-column
						field="Alarm_Time"
						title="告警持续时间"
					></vxe-column>
					<vxe-column
						field="Resolve_Time"
						title="解除服务影响时间"
					></vxe-column>
					<vxe-column
						field="Remark_Time"
						title="首次备注时间"
					></vxe-column>
					<vxe-column
						field="Close_Time"
						title="关单时间"
					></vxe-column>
					<vxe-column field="Standards" title="是否达标"></vxe-column>
					<vxe-column field="Reason" title="留痕情况"></vxe-column>
					<vxe-column
						field="Ticket_Owner"
						title="工单持有人"
					></vxe-column>
					<vxe-column
						field="Ticket_Operator"
						title="处理人"
					></vxe-column>
					<vxe-column title="操作" width="100" show-overflow>
						<template #default="{ row }">
							<vxe-button
								type="text"
								icon="vxe-icon-edit"
								@click="editEvent(row)"
							></vxe-button>
						</template>
					</vxe-column>
				</vxe-table>

				<!-- 编辑表格 -->
				<vxe-modal
					v-model="showEdit"
					:title="selectRow ? '编辑&保存' : '新增&保存'"
					width="1000"
					min-width="800"
					min-height="500"
					:loading="submitLoading"
					resize
					destroy-on-close
				>
					<template #default>
						<vxe-form
							:data="formData"
							:rules="formRules"
							title-align="right"
							title-width="100"
							@submit="submitEvent"
						>
							<vxe-form-item
								title="工单信息"
								title-align="left"
								:title-width="200"
								:span="24"
								:title-prefix="{ icon: 'vxe-icon-comment' }"
							></vxe-form-item>
							<vxe-form-item
								field="TicketNum"
								title="工单号"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.TicketNum"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Req_Time"
								title="请求时间"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.Req_Time"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Remark"
								title="工单备注"
								:span="24"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-textarea
										v-model="data.Remark"
										readonly
										resize="vertical"
										:autosize="{ minRows: 2, maxRows: 4 }"
									></vxe-textarea>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Standards"
								title="是否达标"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-select
										v-model="data.Standards"
										transfer
									>
										<vxe-option
											v-for="item in StandardsList"
											:key="item.value"
											:value="item.value"
											:label="item.label"
										></vxe-option>
									</vxe-select>
								</template>
							</vxe-form-item>
							<vxe-form-item
								title="不合规原因"
								title-align="left"
								:title-width="200"
								:span="24"
								:title-prefix="{
									message: '请填写必填项',
									icon: 'vxe-icon-info-circle-fill',
								}"
							></vxe-form-item>
							<vxe-form-item
								field="Reason"
								title="原因"
								:span="24"
								:item-render="{}"
								:title-suffix="{
									message: '提示信息！！',
									icon: 'vxe-icon-question-circle-fill',
								}"
							>
								<template #default="{ data }">
									<vxe-textarea
										v-model="data.Reason"
										resize="vertical"
										:autosize="{ minRows: 2, maxRows: 4 }"
									></vxe-textarea>
								</template>
							</vxe-form-item>
							<vxe-form-item
								align="center"
								title-align="left"
								:span="24"
							>
								<template #default>
									<vxe-button type="submit">提交</vxe-button>
									<!-- <vxe-button type="reset">重置</vxe-button> -->
								</template>
							</vxe-form-item>
						</vxe-form>
					</template>
				</vxe-modal>
			</el-collapse-item>

			<el-collapse-item title="网络故障报告-登记情况(附件3)" name="5">
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">网络故障报告-登记情况</el-text>
				</div>

				<div class="center-text-3">
					<el-text size="large"
						>数据更新至：<el-text class="red-font"
							>2023-10-22</el-text
						>
					</el-text>
				</div>

				<!-- 原始表格（网络故障报告-登记情况） -->
				<vxe-table
					border
					resizable
					ref="xTable5"
					height="530"
					:row-config="{ isCurrent: true, isHover: true }"
					:export-config="{}"
					:data="tableData_network_report_registered"
				>
					<!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
					<vxe-column type="seq" width="60"></vxe-column>
					<vxe-column field="TicketNum" title="工单号"></vxe-column>
					<vxe-column
						field="Req_Time"
						title="工单请求时间"
					></vxe-column>
					<vxe-column
						field="Network_Report"
						title="故障报告单"
					></vxe-column>
					<vxe-column field="Flag" title="达标"></vxe-column>
					<vxe-column field="Reason" title="不达标原因"></vxe-column>
					<vxe-column field="Duty" title="处理人"></vxe-column>
					<vxe-column title="操作" width="100" show-overflow>
						<template #default="{ row }">
							<vxe-button
								type="text"
								icon="vxe-icon-edit"
								@click="editEvent_network(row)"
							></vxe-button>
						</template>
					</vxe-column>
				</vxe-table>

				<!-- 编辑表格 -->
				<vxe-modal
					v-model="showEdit_Network"
					:title="selectRow_Network ? '编辑&保存' : '新增&保存'"
					width="1000"
					min-width="800"
					min-height="500"
					:loading="submitLoading"
					resize
					destroy-on-close
				>
					<template #default>
						<vxe-form
							:data="formData"
							:rules="formRules"
							title-align="right"
							title-width="100"
							@submit="submitEvent_Network"
						>
							<vxe-form-item
								title="工单信息"
								title-align="left"
								:title-width="200"
								:span="24"
								:title-prefix="{ icon: 'vxe-icon-comment' }"
							></vxe-form-item>
							<vxe-form-item
								field="TicketNum"
								title="工单号"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.TicketNum"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Req_Time"
								title="工单请求时间"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.Req_Time"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Duty"
								title="处理人"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.Duty"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Network_Report"
								title="故障报告单"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.Network_Report"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Network_Time"
								title="故障报告时间"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.Network_Time"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Network_Node"
								title="故障报告节点"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.Network_Node"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Network_reason"
								title="故障报告原因"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.Network_reason"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Network_detail_reason"
								title="故障报告详细原因"
								:span="24"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-textarea
										v-model="data.Network_detail_reason"
										readonly
										resize="vertical"
										:autosize="{ minRows: 2, maxRows: 4 }"
									></vxe-textarea>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Case"
								title="处理事件"
								:span="24"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-textarea
										v-model="data.Case"
										readonly
										resize="vertical"
										:autosize="{ minRows: 2, maxRows: 4 }"
									></vxe-textarea>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Standards"
								title="是否达标"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-select
										v-model="data.Standards"
										transfer
									>
										<vxe-option
											v-for="item in StandardsList"
											:key="item.value"
											:value="item.value"
											:label="item.label"
										></vxe-option>
									</vxe-select>
								</template>
							</vxe-form-item>
							<vxe-form-item
								title="不达标原因"
								title-align="left"
								:title-width="200"
								:span="24"
								:title-prefix="{
									message: '请填写必填项',
									icon: 'vxe-icon-info-circle-fill',
								}"
							></vxe-form-item>
							<vxe-form-item
								field="Reason"
								title="原因"
								:span="24"
								:item-render="{}"
								:title-suffix="{
									message: '提示信息！！',
									icon: 'vxe-icon-question-circle-fill',
								}"
							>
								<template #default="{ data }">
									<vxe-textarea
										v-model="data.Reason"
										resize="vertical"
										:autosize="{ minRows: 2, maxRows: 4 }"
									></vxe-textarea>
								</template>
							</vxe-form-item>
							<vxe-form-item
								align="center"
								title-align="left"
								:span="24"
							>
								<template #default>
									<vxe-button type="submit">提交</vxe-button>
								</template>
							</vxe-form-item>
						</vxe-form>
					</template>
				</vxe-modal>
			</el-collapse-item>

			<el-collapse-item title="网络故障报告-跟进情况(附件3)" name="6">
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">网络故障报告-跟进情况</el-text>
				</div>
				<div class="center-text-3">
					<el-text size="large"
						>数据更新至：<el-text
							class="red-font"
							:data="network_report_followed_update_time"
							>2023-10-15</el-text
						>
					</el-text>
				</div>

				<vxe-table
					border
					resizable
					ref="xTable6"
					height="530"
					:row-config="{ isCurrent: true, isHover: true }"
					:export-config="{}"
					:data="tableData_network_report_followed"
				>
					<vxe-column
						field="TicketNum"
						title="故障报告单"
					></vxe-column>
					<vxe-column field="Flag" title="达标"></vxe-column>
					<vxe-column field="Reason" title="不达标原因"></vxe-column>
					<vxe-column field="Duty" title="跟进处理人"></vxe-column>
					<vxe-column
						field="No_Flag_Duty"
						title="不达标人员"
					></vxe-column>
				</vxe-table>
			</el-collapse-item>

			<el-collapse-item title="442、478流水情况(附件4)" name="7">
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">442流水情况</el-text>
				</div>

				<div class="center-text-3">
					<el-text size="large"
						>数据更新至：<el-text class="red-font"
							>2023-10-23</el-text
						>
					</el-text>
				</div>

				<vxe-table
					border
					resizable
					height="800"
					ref="xTable7"
					:row-config="{ isCurrent: true, isHover: true }"
					:data="tableData_flow_442or478"
				>
					<vxe-column
						field="TicketModel"
						title="流水模板"
					></vxe-column>
					<vxe-column field="TicketNum" title="工单号"></vxe-column>
					<vxe-column
						field="TicketCreateTime"
						title="工单请求时间"
					></vxe-column>
					<vxe-column
						field="TicketCloseTime"
						title="关单时间/上升T2时间"
					></vxe-column>
					<vxe-column field="Standers" title="是否合规"></vxe-column>
					<vxe-column field="Reason" title="不合规原因"></vxe-column>
					<vxe-column field="Duty" title="处理人"></vxe-column>
				</vxe-table>
			</el-collapse-item>
		</el-collapse>
		
		<div class="line" />

		<div class="center-text-4">
			<a>以下表单仅供参考</a>
		</div>

		<el-collapse>
			<el-collapse-item
				title="全部工单审计看板"
				name="1"
				class="el-collapse-item__wrap"
			>
				<!-- 表格标题 -->
				<div class="center-text">
					<el-text size="large">全部工单审计看板</el-text>
				</div>

				<div class="center-text-3">
					<el-text size="large"
						>数据更新至：<el-text class="red-font"
							>2023-10-22</el-text
						>
					</el-text>
				</div>

				<!-- 导出 -->
				<vxe-toolbar>
					<template #buttons>
						<vxe-button @click="exportDataEvent('xTable1')"
							>本页导出</vxe-button
						>
						<vxe-button @click="exportSelectEvent"
							>导出选中</vxe-button
						>
						<vxe-button @click="openExportEvent"
							>高级导出</vxe-button
						>
					</template>
				</vxe-toolbar>

				<!-- 原始表格（全部工单审计表） -->
				<vxe-table
					border
					resizable
					ref="xTable1"
					height="530"
					:row-config="{ isCurrent: true, isHover: true }"
					:export-config="{}"
					:data="tableData"
				>
					<vxe-column type="checkbox" width="60"></vxe-column>
					<vxe-column type="seq" width="60"></vxe-column>
					<vxe-column field="TicketNum" title="工单号"></vxe-column>
					<vxe-column field="Req_Time" title="请求时间"></vxe-column>
					<vxe-column field="Standards" title="是否合规"></vxe-column>
					<vxe-column field="Reason" title="原因"></vxe-column>
					<vxe-column title="操作" width="100" show-overflow>
						<template #default="{ row }">
							<vxe-button
								type="text"
								icon="vxe-icon-edit"
								@click="editEvent(row)"
							></vxe-button>
						</template>
					</vxe-column>
				</vxe-table>

				<!-- 编辑表格 -->
				<vxe-modal
					v-model="showEdit"
					:title="selectRow ? '编辑&保存' : '新增&保存'"
					width="1000"
					min-width="800"
					min-height="500"
					:loading="submitLoading"
					resize
					destroy-on-close
				>
					<template #default>
						<vxe-form
							:data="formData"
							:rules="formRules"
							title-align="right"
							title-width="100"
							@submit="submitEvent"
						>
							<vxe-form-item
								title="工单信息"
								title-align="left"
								:title-width="200"
								:span="24"
								:title-prefix="{ icon: 'vxe-icon-comment' }"
							></vxe-form-item>
							<vxe-form-item
								field="TicketNum"
								title="工单号"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.TicketNum"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Req_Time"
								title="请求时间"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-input
										v-model="data.Req_Time"
										readonly
									></vxe-input>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Remark"
								title="工单备注"
								:span="24"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-textarea
										v-model="data.Remark"
										readonly
										resize="vertical"
										:autosize="{ minRows: 2, maxRows: 4 }"
									></vxe-textarea>
								</template>
							</vxe-form-item>
							<vxe-form-item
								field="Standards"
								title="是否合规"
								:span="12"
								:item-render="{}"
							>
								<template #default="{ data }">
									<vxe-select
										v-model="data.Standards"
										transfer
									>
										<vxe-option
											v-for="item in StandardsList"
											:key="item.value"
											:value="item.value"
											:label="item.label"
										></vxe-option>
									</vxe-select>
								</template>
							</vxe-form-item>
							<vxe-form-item
								title="不合规原因"
								title-align="left"
								:title-width="200"
								:span="24"
								:title-prefix="{
									message: '请填写必填项',
									icon: 'vxe-icon-info-circle-fill',
								}"
							></vxe-form-item>
							<vxe-form-item
								field="Reason"
								title="原因"
								:span="24"
								:item-render="{}"
								:title-suffix="{
									message: '提示信息！！',
									icon: 'vxe-icon-question-circle-fill',
								}"
							>
								<template #default="{ data }">
									<vxe-textarea
										v-model="data.Reason"
										resize="vertical"
										:autosize="{ minRows: 2, maxRows: 4 }"
									></vxe-textarea>
								</template>
							</vxe-form-item>
							<vxe-form-item
								align="center"
								title-align="left"
								:span="24"
							>
								<template #default>
									<vxe-button type="submit">提交</vxe-button>
									<!-- <vxe-button type="reset">重置</vxe-button> -->
								</template>
							</vxe-form-item>
						</vxe-form>
					</template>
				</vxe-modal>

				<!-- 分页按钮 -->
				<vxe-pager
					border
					size="medium"
					:loading="loading1"
					:current-page="tablePage1.currentPage"
					:page-size="tablePage1.pageSize"
					:total="tablePage1.totalResult"
					:layouts="[
						'PrevPage',
						'JumpNumber',
						'NextPage',
						'FullJump',
						'Sizes',
						'Total',
					]"
					@page-change="handlePageChange1"
				>
				</vxe-pager>
			</el-collapse-item>

			<el-collapse-item
				title="解除服务影响or上升不达标数据(grafana)"
				name="3"
			>
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">解除服务影响or上升不达标数据</el-text>
				</div>

				<!-- 导出 -->
				<vxe-toolbar>
					<template #buttons>
						<vxe-button @click="exportDataEvent('xTable3')"
							>导出</vxe-button
						>
					</template>
				</vxe-toolbar>

				<!-- 解除服务影响or上升不达标数据 -->
				<vxe-table
					border
					resizable
					height="800"
					ref="xTable3"
					:row-config="{ isCurrent: true, isHover: true }"
					:data="tableData_remove_impact"
				>
					<vxe-column type="seq" width="60"></vxe-column>
					<vxe-column field="TicketNum" title="单号"></vxe-column>
					<vxe-column field="AlarmName" title="告警名称"></vxe-column>
					<vxe-column
						field="TicketQueryTime"
						title="工单请求时间"
					></vxe-column>
					<vxe-column
						field="AlarmTime"
						title="告警持续时间(分钟)"
					></vxe-column>
					<vxe-column
						field="ResolveTime"
						title="解除服务影响耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="FirstRemarkTime"
						title="首次备注时间(分钟)"
					></vxe-column>
					<vxe-column
						field="UpT2Time"
						title="上升T2耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="CloseTime"
						title="关单耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="NearTimeAlarm"
						title="相邻时间告警量"
					></vxe-column>
					<vxe-column field="Reason" title="不达标原因"></vxe-column>
					<vxe-column field="DutyName" title="排班人员"></vxe-column>
					<vxe-column
						field="AlarmDuty"
						title="告警接收人"
					></vxe-column>
				</vxe-table>
				<!-- 分页按钮 -->
				<vxe-pager
					border
					size="medium"
					:loading="loading3"
					:current-page="tablePage3.currentPage"
					:page-size="tablePage3.pageSize"
					:total="tablePage3.totalResult"
					:layouts="[
						'PrevPage',
						'JumpNumber',
						'NextPage',
						'FullJump',
						'Sizes',
						'Total',
					]"
					@page-change="handlePageChange3"
				>
				</vxe-pager>
			</el-collapse-item>

			<el-collapse-item title="跟进or结单不达标数据(grafana)" name="4">
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">跟进or结单不达标数据</el-text>
				</div>

				<!-- 导出 -->
				<vxe-toolbar>
					<template #buttons>
						<vxe-button @click="exportDataEvent('xTable4')"
							>导出</vxe-button
						>
					</template>
				</vxe-toolbar>

				<!-- 跟进or结单不达标数据 -->
				<vxe-table
					border
					resizable
					height="600"
					ref="xTable4"
					:row-config="{ isCurrent: true, isHover: true }"
					:data="tableData_flow_over"
				>
					<vxe-column type="seq" width="60"></vxe-column>
					<vxe-column field="TicketNum" title="单号"></vxe-column>
					<vxe-column field="AlarmName" title="告警名称"></vxe-column>
					<vxe-column
						field="TicketQueryTime"
						title="工单请求时间"
					></vxe-column>
					<vxe-column
						field="AlarmTime"
						title="告警持续时间(分钟)"
					></vxe-column>
					<vxe-column
						field="ResolveTime"
						title="解除服务影响耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="FirstRemarkTime"
						title="首次备注时间(分钟)"
					></vxe-column>
					<vxe-column
						field="UpT2Time"
						title="上升T2耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="CloseTime"
						title="关单耗时(分钟)"
					></vxe-column>
					<vxe-column
						field="NearTimeAlarm"
						title="相邻时间告警量"
					></vxe-column>
					<vxe-column field="Reason" title="不达标原因"></vxe-column>
					<vxe-column field="DutyName" title="排班人员"></vxe-column>
					<vxe-column
						field="AlarmDuty"
						title="告警接收人"
					></vxe-column>
				</vxe-table>
				<!-- 分页按钮 -->
				<vxe-pager
					border
					size="medium"
					:loading="loading4"
					:current-page="tablePage4.currentPage"
					:page-size="tablePage4.pageSize"
					:total="tablePage4.totalResult"
					:layouts="[
						'PrevPage',
						'JumpNumber',
						'NextPage',
						'FullJump',
						'Sizes',
						'Total',
					]"
					@page-change="handlePageChange4"
				>
				</vxe-pager>
			</el-collapse-item>

			<el-collapse-item title="邮件抽检--->待建设" name="8">
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">邮件抽检</el-text>
				</div>
			</el-collapse-item>

			<el-collapse-item title="重大故障告警--->无想法" name="9">
				<!-- 表格标题 -->
				<div class="center-text-2">
					<el-text size="large">重大故障告警</el-text>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import VXETable from "vxe-table";
import { ElMessageBox } from "element-plus";
// import { defineComponent } from "vue";
// import { ElConfigProvider } from "element-plus";
// import zhCn from "element-plus/dist/locale/zh-cn.mjs";
// import "dayjs/locale/zh-cn";
// import {gaoym_test} from "../api/model/info.js";
// import {upload} from "../api/model/common.js";

// 错误处理
const debounce = (fn, delay) => {
	let timer = null;
	return function () {
		let context = this;
		let args = arguments;
		clearTimeout(timer);
		timer = setTimeout(function () {
			fn.apply(context, args);
		}, delay);
	};
};

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
	constructor(callback) {
		callback = debounce(callback, 16);
		super(callback);
	}
};

export default {
	data() {
		return {
			selectRow: null,
			showEdit: false,
			selectRow_Network: null,
			showEdit_Network: false,
			loading1: false,
			loading2: false,
			loading3: false,
			loading4: false,
			valueTime: "",
			selectTime: [],
			// 是否合规
			StandardsList: [
				//是否合规
				{ label: "是", value: "是" },
				{ label: "否", value: "否" },
			],
			formData: null,
			// formRules: {
			//   name: [
			//     { required: true, message: '请输入名称' },
			//     { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
			//   ],
			//   nickname: [
			//     { required: true, message: '请输入昵称' }
			//   ],
			//   sex: [
			//     { required: true, message: '请选择性别' }
			//   ]
			// },

			// 原始表格列表
			tableData: [], // 全部工单数据
			tableData_Bak: [],
			tableRandomData: [], // 随机审计数据
			tableRandomData_Bak: [],
			tableData_remove_impact: [], // 解除服务影响or上升不达标数据
			tableData_remove_impact_Bak: [],
			tableData_flow_over: [], // 结单or跟进不达标数据
			tableData_flow_over_Bak: [],
			tableData_network_report_registered: [], // 网络故障报告登记情况
			tableData_network_report_registered_Bak: [],
			tableData_network_report_followed: [], // 网络故障报告跟进情况
			tableData_network_report_followed_Bak: [],
			tableData_flow_442or478: [], // 442、478流水审计
			tableData_flow_442or478_Bak: [],
			tableData_performance_panel: [], // 监控绩效面板不达标工单备注小于30分钟
			tableData_performance_panel_Bak: [],
			tableData_performance_panel_30: [], // 监控绩效面板不达标工单备注大于30分钟
			tableData_performance_panel_30_Bak: [],
			tableData_follow_grafana:[],	// grafana跟进不达标数据看板
			tableData_follow_grafana_Bak:[],
			tableData_summary:[],	// 汇总数据
			tableData_summary_Bak:[],
			tablePage1: {
				//分页数据
				currentPage: 1,
				pageSize: 10,
				totalResult: 0,
			},
			tablePage2: {
				//分页数据
				currentPage: 1,
				pageSize: 10,
				totalResult: 0,
			},
			tablePage3: {
				//分页数据
				currentPage: 1,
				pageSize: 10,
				totalResult: 0,
			},
			tablePage4: {
				//分页数据
				currentPage: 1,
				pageSize: 10,
				totalResult: 0,
			},
			shortcuts: [
				// 快速选取时间
				{
					text: "最近一周",
					value: () => {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						return [start, end];
					},
				},
				{
					text: "最近一个月",
					value: () => {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						return [start, end];
					},
				},
				{
					text: "最近三个月",
					value: () => {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						return [start, end];
					},
				},
			],
			activeNames: [], // 默认展开的表单
			network_report_followed_update_time: "2023-10-24", // 网络故障报告跟进表更新时间
		};
	},
	created() {
		this.findList1();
		this.findList3();
		this.findList4();
	},
	methods: {
		// formatterSex({ cellValue }) {
		// 	const item = this.sexList.find((item) => item.value === cellValue);
		// 	return item ? item.label : "";
		// },
		async editEvent(row) {
			//编辑事件
			let remark = await this.$API.info.Query_Ticket_Remark.post([
				row.TicketNum,
			]);
			this.formData = {
				TicketNum: row.TicketNum, //工单号
				Req_Time: row.Req_Time, //工单请求时间
				Remark: remark.data,
				Standards: row.Standards, //是否合规
				Reason: row.Reason, //不合格原因
			};
			this.selectRow = row;
			this.showEdit = true;
		},
		async editEvent_network(row) {
			//编辑事件
			let ticket =
				await this.$API.info.Network_Error_Registered_Detail.post([
					row.TicketNum,
				]);
			console.log("1010", ticket.data.TicketNum);
			this.formData = {
				TicketNum: ticket.data.TicketNum, //工单号
				Req_Time: ticket.data.Req_Time, //工单请求时间
				Duty: ticket.data.Duty, // 所有者
				Network_Report: ticket.data.Network_Report, // 故障报告单
				Network_Time: ticket.data.Network_Time, // 故障报告时间
				Network_Node: ticket.data.Network_Node, // 故障报告节点
				Network_reason: ticket.data.Network_reason, // 故障报告原因
				Network_detail_reason: ticket.data.Network_detail_reason, // 故障报告详细原因
				Case: ticket.data.Case, // 处理事件

				Standards: ticket.data.Standards, //是否合规
				Reason: ticket.data.Reason, //不合格原因
			};
			this.selectRow_Network = row;
			this.showEdit_Network = true;
		},
		async submitEvent() {
			//提交事件
			this.showEdit = false;
			VXETable.modal.message({ content: "保存成功", status: "success" });
			// console.log(this.formData.TicketNum);
			await this.$API.info.Save_Ticket_Flag.post([
				this.formData.TicketNum,
				this.formData.Standards,
				this.formData.Reason,
			]); //保存评判信息到后端
			Object.assign(this.selectRow, this.formData);
		},
		async submitEvent_Network() {
			//提交事件
			this.showEdit_Network = false;
			VXETable.modal.message({ content: "保存成功", status: "success" });
			// console.log(this.formData.TicketNum);
			await this.$API.info.Save_NetWork_Ticket_Flag.post([
				this.formData.TicketNum,
				this.formData.Standards,
				this.formData.Reason,
			]); //保存评判信息到后端
			this.selectRow_Network.Flag = this.formData.Standards;
			console.log("selectRow_Network", this.selectRow_Network);
			Object.assign(this.selectRow_Network, this.formData);
		},
		getTimes(time) {
			// 获取时间
			console.log(time);
			this.selectTime = time;
		},
		queryData() {
			// 数据查询-总
			this.queryAllData();
			this.queryRandomData();
			this.queryRemoveImpactData();
			this.queryUpFollowData();
			this.queryNetworkErrorRegistered();
			this.queryFlowErrorTicket();
			this.queryNetworkErrorFollowed();
			this.queryPerformancePanel();
			this.queryPerformancePanel_30();
			this.queryFollowGrafana();
			this.querySummaryData();
		},
		async queryAllData() {
			//查询数据
			var res2 = await this.$API.info.Query_Ticket_Info.post(
				this.selectTime
			);
			console.log(res2);
			this.tableData = res2.data;
			this.tableData_Bak = res2.data;
			this.findList1();
		},
		async queryRandomData() {
			//查询数据
			var res2 = await this.$API.info.Query_Random_Ticket_Info.post(
				this.selectTime
			);
			console.log(res2);
			this.tableRandomData = res2.data;
			this.tableRandomData_Bak = res2.data;
		},
		async queryRemoveImpactData() {
			// 查询数据
			var res = await this.$API.info.Query_Remove_Impact.post(
				this.selectTime
			);
			console.log("解除服务影响or上升不达标数据", res);
			this.tableData_remove_impact = res.data;
			this.tableData_remove_impact_Bak = res.data;
			this.findList3();
		},
		async queryUpFollowData() {
			//查询数据
			var res = await this.$API.info.Up_Follow_Data.post(this.selectTime);
			console.log("结单or跟进不达标数据", res);
			this.tableData_flow_over = res.data;
			this.tableData_flow_over_Bak = res.data;
			this.findList4();
		},
		async queryNetworkErrorRegistered() {
			// 查询数据
			var res = await this.$API.info.Network_Error_Registered.post(
				this.selectTime
			);
			console.log("网络故障报告-登记情况", res);
			this.tableData_network_report_registered = res.data;
			this.tableData_network_report_registered_Bak = res.data;
		},
		async queryFlowErrorTicket() {
			// 查询数据
			var res = await this.$API.info.Query_Flow_Error_Ticket.post(
				this.selectTime
			);
			console.log("流水列表", res);
			this.tableData_flow_442or478 = res.data;
			this.tableData_flow_442or478_Bak = res.data;
		},
		async queryNetworkErrorFollowed() {
			//查询数据
			var res = await this.$API.info.Query_Network_Error_Followed.post(
				this.selectTime
			);
			this.tableData_network_report_followed = res.data;
			this.tableData_network_report_followed_Bak = res.data;
		},
		async queryPerformancePanel() {
			// 查询数据
			var res = await this.$API.info.Query_Performance_Panel.post(
				this.selectTime
			);
			this.tableData_performance_panel = res.data;
			this.tableData_performance_panel_Bak = res.data;
		},
		async queryPerformancePanel_30() {
			// 查询数据
			var res = await this.$API.info.Query_Performance_Panel_30.post(
				this.selectTime
			);
			this.tableData_performance_panel_30 = res.data;
			this.tableData_performance_panel_30_Bak = res.data;
		},
		async queryFollowGrafana() {
			// 查询数据
			var res = await this.$API.info.Query_Follow_Grafana.post(
				this.selectTime
			);
			this.tableData_follow_grafana = res.data;
			this.tableData_follow_grafana_Bak = res.data;
		},
		async querySummaryData() {
			// 查询数据
			var res = await this.$API.info.Query_Summary_Data.post(
				this.selectTime
			);
			this.tableData_summary = res.data;
			this.tableData_summary = res.data;
		},
		findList1() {
			//分页展示函数
			this.loading1 = true;
			setTimeout(() => {
				const list = this.tableData_Bak;
				this.loading1 = false;
				this.tablePage1.totalResult = list.length;
				console.log(
					this.tablePage1.currentPage,
					this.tablePage1.pageSize
				);
				this.tableData = list.slice(
					(this.tablePage1.currentPage - 1) *
						this.tablePage1.pageSize,
					this.tablePage1.currentPage * this.tablePage1.pageSize
				);
			}, 300);
		},
		findList3() {
			//分页展示函数
			this.loading3 = true;
			setTimeout(() => {
				const list = this.tableData_remove_impact_Bak;
				this.loading3 = false;
				this.tablePage3.totalResult = list.length;
				console.log(
					this.tablePage3.currentPage,
					this.tablePage3.pageSize
				);
				this.tableData_remove_impact = list.slice(
					(this.tablePage3.currentPage - 1) *
						this.tablePage3.pageSize,
					this.tablePage3.currentPage * this.tablePage3.pageSize
				);
			}, 300);
		},
		findList4() {
			//分页展示函数
			this.loading4 = true;
			setTimeout(() => {
				const list = this.tableData_flow_over_Bak;
				this.loading4 = false;
				this.tablePage4.totalResult = list.length;
				console.log(
					this.tablePage4.currentPage,
					this.tablePage4.pageSize
				);
				this.tableData_flow_over = list.slice(
					(this.tablePage4.currentPage - 1) *
						this.tablePage4.pageSize,
					this.tablePage4.currentPage * this.tablePage4.pageSize
				);
			}, 300);
		},
		handlePageChange1({ currentPage, pageSize }) {
			// 分页切换函数
			console.log("测试切换", currentPage, pageSize);
			this.tablePage1.currentPage = currentPage;
			this.tablePage1.pageSize = pageSize;
			this.findList1();
		},
		handlePageChange3({ currentPage, pageSize }) {
			// 分页切换函数
			console.log("测试切换", currentPage, pageSize);
			this.tablePage3.currentPage = currentPage;
			this.tablePage3.pageSize = pageSize;
			this.findList3();
		},
		handlePageChange4({ currentPage, pageSize }) {
			// 分页切换函数
			console.log("测试切换", currentPage, pageSize);
			this.tablePage4.currentPage = currentPage;
			this.tablePage4.pageSize = pageSize;
			this.findList4();
		},
		exportDataEvent(xTablex) {
			// 本页导出
			if (xTablex == "xTable1") {
				this.$refs.xTable1.exportData({ type: "csv" });
			} else if (xTablex == "xTable2") {
				this.$refs.xTable2.exportData({ type: "csv" });
			} else if (xTablex == "xTable3") {
				this.$refs.xTable3.exportData({ type: "csv" });
			} else if (xTablex == "xTable4") {
				this.$refs.xTable4.exportData({ type: "csv" });
			} else {
				ElMessageBox.alert("导出失败，请联系开发人员查看", "错误", {
					confirmButtonText: "OK",
				});
			}
		},
		exportSelectEvent() {
			// 导出选中
			this.$refs.xTable1.exportData({
				data: this.$refs.xTable1.getCheckboxRecords(),
			});
		},
		openExportEvent() {
			// 高级导出
			this.$refs.xTable1.openExport();
		},
	},
};
</script>

<style scoped>
.demo-date-picker {
	display: flex;
	width: 100%;
	padding: 0;
	flex-wrap: wrap;
}

.demo-date-picker .block {
	padding: 30px 0;
	text-align: center;
	border-right: solid 1px var(--el-border-color);
	flex: 1;
}

.demo-date-picker .block:last-child {
	border-right: none;
}

.demo-date-picker .demonstration {
	display: block;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 20px;
}

.center-text {
	text-align: center;
	font-size: 20px;
	margin-bottom: 20px;
	font-weight: bold;
}

.center-text-2 {
	text-align: center;
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	font-weight: bold;
}

.center-text-3 {
	text-align: center;
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 50px;
	/* font-weight: bold; */
}

.center-text-4 {
	text-align: center;
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 50px;
	/* font-weight: bold; */
}

.el-collapse >>> .el-collapse-item {
	background-color: #ff8040 !important;
}

.red-font {
	color: red;
	font-weight: bold;
}

/* 横线 */
.line{
  float:right;
  width: 100%;
  height: 1px;
  margin-top: 30px;
  background:#d4c4c4;
  position: relative;
  text-align: center;
}

/* ffffff.el-collapse-item >>> .el-collapse-item__header {
	background-color: # !important
} */

/* .el-collapse-item >>> .el-collapse-item__wrap {
	background-color: #00ff80 !important
} */
</style>
